<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .red{
            color: red;
        }
        .bc{
            background-color: #dedede;
        }
        .fc{
            color: blue;
        }
        .fs{
            font-size: 18px;
        }
        .border{
            border: 2px solid black;
        }
        .success{
            color: forestgreen;
        }
        .warn{
            color: orange;
        }
        .error{
            color: brown;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>boolean类型属性操作</h4>
        <p>v-bind对boolean类型属性的操作完成的是DOM属性的绑定</p>
        <!-- 标签属性定义=>H5之后 boolean 类型属性只要定义 取值均为true -->
        <input type="text" readonly value="11">
        <br>
        <input type="text" :readonly=" flag " value="22">
        <input type="button" value="flag" @click=" flag=!flag ">
        <br>
        <p>v-bind完成boolean类型属性操作，属于DOM属性控制，因此在取值时必须满足数据类型的对应关系</p>
        <!-- boolean取值为 字符串时 vue始终将其转换为 true -->
        <input type="text" :readonly=" str " value="取值空字符串">
        <br>
        <!-- boolean取值除 字符串外 其它数据类型保持 JS转换规则 -->
        <input type="text" :readonly=" num " value="数值0">
        <br>
        <input type="text" :readonly=" arg " value="null">
        <br>
        <input type="text" :readonly=" arg1 " value="undefined">

        <hr>
        <h4>v-bind对class属性的绑定操作</h4>
        <p>vue为方便v-bind对class的动态操作，提供两种绑定模式和三种取值规则</p>
        <h5>1、两种绑定模式</h5>
        <ol>
            <li>独立动态模式<br>
                所有的class取值，都被v-bind统一进行绑定控制<br>
                <p :class=" flag1?'bc red':'bc' ">背景始终保持灰色；文字由 flag1:{{ flag1 }}控制显示红色还是不显示红色</p>
                <input type="button" value="flag1" @click="flag1=!flag1">
                <br>
            </li>
            <li>动静结合模式【该模式只有class和style能够使用】<br>
                在vue环境下，一个标签可以同定义一个 静态 class取值和一个 v-bind 动态class取值 <br>
                静态class用于描述标签始终需要存在相关样式取值，动态class受控于变量完成动态操作 <br>
                两个模式的样式最终会合并成一个主体样式，为标签提供样式服务<br>
                <p class="bc" :class=" flag2?'red':'' ">背景始终保持灰色；文字由 flag2:{{ flag2 }}控制显示红色还是不显示红色</p>
                <p class="bc" :class=" !flag2||'red' ">背景始终保持灰色；文字由 flag2:{{ flag2 }}控制显示红色还是不显示红色</p>
                <input type="button" value="flag2" @click="flag2=!flag2">
            </li>
        </ol>
        <h5>2、三种取值规则</h5>
        <p class="bc fc fs border">基础效果</p>
        <ol>
            <li>String:遵守HTML标签class的定义规则进行动态的字符串样式名绑定 <br>
                <p :class=" 'bc fc fs border' ">取值string-匿名字符串</p>
                <p :class=" classStr ">
                    取值string-仓库字符串变量
                    <input type="button" value="切换" @click=" classStr=( classStr==''?'bc fc fs border':'' ) ">
                </p>
                ……
            </li>
            <li>Array:取值数组的目的是为了保留仓库的数据类型，方便开发操作；样式构建是v-bind会自动完成空格拼接 <br>
                <p :class=" ['bc','fc','fs','border'] ">取值Array-匿名数组</p>
                <p :class=" classArr ">取值Array-仓库数组变量<br>
                    <input type="button" value="切换bc" @click="changeClass('bc')">
                    <input type="button" value="切换fc" @click="changeClass('fc')">
                    <input type="button" value="切换fs" @click="changeClass('fs')">
                    <input type="button" value="切换border" @click="changeClass('border')">
                </p>
                <p :class=" Array.from(classArr2) ">取值Array-仓库数组变量<br>
                    <input type="button" value="切换bc" @click="changeClass2('bc')">
                    <input type="button" value="切换fc" @click="changeClass2('fc')">
                    <input type="button" value="切换fs" @click="changeClass2('fs')">
                    <input type="button" value="切换border" @click="changeClass2('border')">
                </p>
            </li>
            <li>Object:取值对象的目的是为了将样式转为boolean类型变量控制；<br>
                v-bind:class=" { key:value } "  => key 将要装载的样式名，value取值false|true <br>
                当value=true时，表示key样式需要存在；当value=false 时表示key样式不需要存在
                <p :class=" { bc:true,fc:true,fs:true,border:true } ">取值Object-匿名对象</p>
                <p :class=" classObj ">取值Object-仓库对象
                    <input type="button" value="切换bc" @click=" classObj.bc = !classObj.bc ">
                    <input type="button" value="切换fc" @click=" classObj.fc = !classObj.fc ">
                    <input type="button" value="切换fs" @click=" classObj.fs = !classObj.fs ">
                    <input type="button" value="切换border" @click=" classObj.border = !classObj.border ">
                </p>
                <p>
                     {{ value }} <br>
                    <input :class=" {
                                        'success':value.length>10,
                                        'warn':value.length>6&&value.length<=10,
                                        'error':value.length<=6
                                    } " 
                        type="text" 
                        @input=" value=$event.target.value " 
                    >
                </p>
            </li>
        </ol>
        <hr>
        <h4>v-bind对style属性的绑定操作</h4>
        <p>vue为方便v-bind对style的动态操作，提供两种绑定模式和三种取值规则</p>
        <h5>1、两种绑定模式</h5>
        <ol>
            <li>独立动态模式<br>
                所有的style取值，都被v-bind统一进行绑定控制<br>
                <p :style=" `font-size:18px;color:${color};` ">独立动态绑定-匿名字符串</p>
                <input type="color" @input=" color=$event.target.value ">
            </li>
            <li>动静结合模式【该模式只有class和style能够使用】<br>
                在vue环境下，提供不需要变化的静态style和需要变化的v-bind绑定的动态style ， vue会自行完成样式组合 <br>
                <p style="font-size:18px;" :style=" `color:${color1};` ">独立动态绑定-匿名字符串</p>
                <input type="color" @input=" color1=$event.target.value ">
            </li>
        </ol>
        <h5>2、三种取值规则</h5>
        <ol>
            <li>String:v-bind绑定行内样式style时，取值String只需保证字符串样式符合HTML style属性的规范取值即可 <br>
                <p :style=" 'color:red;font-size:18px;' ">string-匿名字符串</p>
                <p :style=" styleStr ">string-仓库变量字符串</p>
            </li>
            <li>Object：取值对象只是为了将行内样式字符串拼接操作，转换为对象的键值对操作 <br>
                <p :style=" {
                                color:color2,
                                'font-size':size+'px'
                            } " 
                >Object-匿名对象</p>
                <p :style=" {
                                color:color2,
                                fontSize:`${size}px`
                            } " 
                >Object-匿名对象</p>
                <input type="color" @input=" color2=$event.target.value ">
                <input type="range" min="12" max="40" step="2" value="12" @input=" size=$event.target.value ">
                <br>
                <p :style=" styleObj " >Object-仓库对象</p>
                <input type="color" @input=" styleObj.color=$event.target.value ">
                <input type="range" min="12" max="40" step="2" value="12" @input=" styleObj.fontSize=$event.target.value+'px' ">
            </li>
            <li>Array-对多个可复用的仓库对象样式取值进行合并整合; <br>
                <!-- {{ styleObj+styleObj2 }} -->
                <p :style=" [styleObj,styleObj2,setyleObj3] ">一次性完成三个动态对象的绑定</p>
            </li>
        </ol>

    </div>
    <script type="module"> 
    // {
    //     color:'red',
    //     'font-size':'18px'
    //     'fontSize':'18px'

    // }
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag:false,
                    str:"",
                    num:0,
                    arg:null,
                    arg1:undefined,
                    flag1:false,
                    flag2:false,
                    classStr:"bc fc fs border",
                    classArr:['bc','fc','fs','border'],
                    classArr2:new Set(['bc','fc','fs','border']),
                    classObj:{ bc:true,fc:true,fs:true,border:true },
                    value:"",
                    color:"#000",
                    color1:"#000",
                    styleStr:'color:red;font-size:18px;',
                    color2:"#000",
                    size:12,
                    styleObj:{
                        color:"red",
                        fontSize:"12px"
                    },
                    styleObj2:{
                        border:"1px solid black"
                    },
                    setyleObj3:{
                        backgroundColor:"#dedede"
                    }

                }
            },
            methods:{
                changeClass(cname){
                    let set = new Set(this.classArr);
                    if(set.has(cname)){
                        set.delete(cname)
                    }else{
                        set.add(cname)
                    }
                    this.classArr = Array.from(set);
                },
                changeClass2(cname){
                    if(this.classArr2.has(cname)){
                        this.classArr2.delete(cname)
                    }else{
                        this.classArr2.add(cname)
                    }
                }
            }
        }).mount("#app")
    </script>
</body>
</html>